<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>改进后 - Flex Panels 💪 </title>
  <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
</head>
<body>
<style>
	  html {
      box-sizing: border-box;
      background:#ffc600;
      font-family:'helvetica neue';
      font-size: 20px;
      font-weight: 200;
    }
    body {
      margin: 0;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }

    .panels {
      min-height:100vh;
      overflow: hidden;
		display: flex;
    }

    .panel {
/*		调试时添加边框以便分辨*/
/*		border: 1px solid #f00;*/
      background:#6B0F9C;
      box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
      color:white;
      text-align: center;
      align-items:center;
      /* Safari transitionend event.propertyName === flex */
      /* Chrome + FF transitionend event.propertyName === flex-grow */
      transition:
        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        background 0.2s;
      font-size: 20px;
      background-size:cover;
      background-position:center;
	  flex: 1;
	  display: flex;
	  justify-content: center;
	  flex-direction: column;
    }


    .panel1 { background-image:url(https://source.unsplash.com/UdgvzNom0Xs/1500x1500); }
    .panel2 { background-image:url(https://source.unsplash.com/fHXP17AxOEk/1500x1500); }
    .panel3 { background-image:url(https://source.unsplash.com/3IEZsaXmzzs/1500x1500); }
    .panel4 { background-image:url(https://source.unsplash.com/tNDvFkxkBHo/1500x1500); }
    .panel5 { background-image:url(https://source.unsplash.com/GEJxI_QRPwM/1500x1500); }

    .panel > * {
      margin: 0;
      width: 100%;
      transition:transform 0.5s 0.7s;
	  align-items: center;
      display: flex;
      flex: 1 0 auto;
      justify-content: center;
    }

    .panel p {
      text-transform: uppercase;
      font-family: 'Amatic SC', cursive;
      text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
      font-size: 2em;
    }
    .panel p:nth-child(2) {
      font-size: 4em;
    }

    .panel.open {
	   font-size:40px;
	   flex: 5;
    }
  
    .panel p:first-child {
    	transform: translateY(-100%);
    }
    
    .panel p:last-child {
    	transform: translateY(100%);
    }
    
    .panel.open p:first-child {
    	transform: translateY(0);
    }
    
    .panel.open p:last-child {
    	transform: translateY(0);
    }

    .cta {
      color:white;
      text-decoration: none;
    }

</style>
  <div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>

  <script>
	  const panels = document.querySelectorAll('.panel');
	  
	  function toggleOpen(e) {
//		  console.log(this);
		  this.classList.toggle('open');
	  }
	  
	  panels.forEach( panel => panel.addEventListener('click', toggleOpen, false));
  </script>

</body>
</html>
